<template>
	<view class="user">
		<view class="operationCenter">
			<view class="orderDataView">
				<view class="item" v-for="(item, infoIndex) in info" :key="infoIndex">
					<view class="top_no">
						订单号：{{ item.orderId }}
					</view>
					<view class="content">
						<view class="item_tr">
							<view class="item_td">
								购买者：{{ item.userName.length > 8 ? item.userName.substring(0, 8) + "..." : item.userName}}
							</view>
							<view class="item_td">
								订单分成：￥{{ item.currentMonthSum }}
							</view>
						</view>
						<view class="item_tr">
							<view class="item_td">
								商品名称：{{ item.storeName.length > 8 ? item.storeName.substring(0, 8) + "..." : item.storeName}}
							</view>
							<view class="item_td">
								订单数量：{{ item.currentMonthAmount }} 单
							</view>
						</view>
						<view class="item_tr">
							<view class="item_td">
								下单地址：{{ item.areaName }}
							</view>

						</view>
						<view class="item_tr">

							<view class="item_td">
								分润时间：{{ item.addTime }}
							</view>
						</view>
					</view>
				</view>
				<Loading :loaded="loaded" :loading="loading"></Loading>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getOperateCommissionInfo4monthDetail
	} from '@/api/user'
	import Loading from "@/components/Loading";
	const NAME = 'operationCenterDetail'
	export default {
		name: NAME,
		components: { Loading },
		data: function() {
			return {
				filterBtnstartDate: '',
				info: [],
				areaId:'',
				where: {
					page: 1,
					limit: 10
				},
				loadTitle: "",
				loaded: false,
				loading: false,
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		mounted: function() {
			this.filterBtnstartDate = this._route.query.filterBtnstartDate;
			this.areaId = this._route.query.areaId;
			this.getCityDayInfo()
		},
		onReachBottom() {
		  !this.loading && this.getCityDayInfo();
		},
		methods: {
			getCityDayInfo(){
				let that = this;
				if (that.loading) return; 
				if (that.loaded) return; 
				that.loading = true;
				getOperateCommissionInfo4monthDetail(that.where, that.filterBtnstartDate, that.areaId).then(
					res => {
						that.loading = false;
						let listLenth = 0;
						if(res.data.list != ''){
							that.where.page = that.where.page + 1;
							that.info.push.apply(that.info, res.data.list[0].list);
							listLenth = res.data.list[0].list.length
						}
						that.loaded = listLenth < that.where.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			}

		}
	}
</script>

<style lang="less">
	.operationCenter .orderDataView .item .top_no::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		border-bottom: 2rpx solid #e8e8e8;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	.operationCenter {
		

		

		.orderDataView {
			width: 100%;
			height: auto;
			overflow-y: auto;
			
			.item {
				width: 100%;
				height: auto;
				overflow: hidden;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;

				.top_no {
					position: relative;
					height: 80rpx;
					width: 100%;
					line-height: 80rpx;
					padding-left: 30rpx;
					font-size: 28rpx;
					color: #333333;
					
				}

				.content {
					height: 280rpx;
					width: 100%;
					position: relative;
					.item_tr {
						display: table;
						height: 70rpx;
						width: 100%;
						box-sizing: border-box;
						padding: 0 30rpx;

						.item_td {
							display: table-cell;
							height: 100%;
							vertical-align: middle;
							color: #333333;
							font-size: 28rpx;
						}

						.item_td:nth-child(1) {
							width: 65%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.item_td:nth-child(2) {
							width: 35%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					.time_date{
						font-size: 40rpx;
						color: #000000;
						display: inline-block;
						position: absolute;
						right: 50rpx;
						top: 100rpx;
					}
				}
			}
		}
		
		
		.footer{
			height: 140rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			border-top: #E8E8E8 solid 1rpx;
			display: table;
			table-layout: fixed;
			.item{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				
				.iconfont{
					padding: 13rpx;
					border-radius: 100%;
					background-color: #0081FF;
					color: #FFFFFF;
				}
				
				.active{
					background-color: #d0114f;
				}
				
				.title{
					display: block;
					text-align: center;
					font-size: 30rpx;
					margin-top: 15rpx;
				}
				
			}
		}
	}
</style>
